<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公交地铁</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
  <div class="container">
    <!-- 顶部返回按钮 -->
    <header class="header">
      <button class="back-btn" onclick="window.history.back()">←</button>
      <h2>公交地铁</h2>
    </header>
    
    <!-- 公交卡信息 -->
    <div class="transport-card">
      <div>电子交通卡</div>
      <div class="card-balance">¥<span id="transport-balance">15.80</span></div>
      <div class="card-number">**** **** **** 1234</div>
    </div>
    
    <!-- 乘车码 -->
    <div class="section">
      <h3>乘车码</h3>
      <img src="{{ url_for('static', filename='img/hh.gif') }}" alt="乘车二维码" class="transport-qr-code">
      <p style="text-align: center;">二维码每十分钟自动刷新</p>
    </div>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button onclick="showChargeDialog()">充值</button>
      <button onclick="showRecords()">交易记录</button>
    </div>
    
    <!-- 充值对话框 (默认隐藏) -->
    <div id="charge-dialog" class="section" style="display: none;">
      <h3>选择充值金额</h3>
      <div class="charge-amounts">
        <div class="charge-amount" onclick="selectChargeAmount(10)">10元</div>
        <div class="charge-amount" onclick="selectChargeAmount(20)">20元</div>
        <div class="charge-amount" onclick="selectChargeAmount(50)">50元</div>
        <div class="charge-amount" onclick="selectChargeAmount(100)">100元</div>
        <div class="charge-amount" onclick="selectChargeAmount(200)">200元</div>
        <div class="charge-amount" onclick="selectChargeAmount(0)">其他</div>
      </div>
      
      <div id="custom-amount" style="display: none;">
        <label>自定义金额：</label>
        <input type="number" id="charge-input" min="1" step="0.01">
      </div>
      
      <button onclick="confirmCharge()" style="width: 100%;">确认充值</button>
    </div>
    
    <!-- 交易记录 (默认隐藏) -->
    <div id="records-section" class="section" style="display: none;">
      <h3>交易记录</h3>
      <div class="transport-history-item">
        <span>2025-06-10 08:30</span>
        <span>-2.00元</span>
        <span>地铁乘车</span>
      </div>
      <div class="transport-history-item">
        <span>2025-06-09 18:15</span>
        <span>-1.50元</span>
        <span>公交乘车</span>
      </div>
      <div class="transport-history-item">
        <span>2025-06-08 12:00</span>
        <span>+50.00元</span>
        <span>卡片充值</span>
      </div>
      <button onclick="hideRecords()" style="width: 100%; margin-top: 10px;">关闭</button>
    </div>
  </div>
  
  <script>
    // 公交卡余额
    let transportBalance = 15.80;

    // 更新余额显示
    function updateTransportBalance() {
      document.getElementById('transport-balance').textContent = transportBalance.toFixed(2);
    }

    // 显示充值对话框
    function showChargeDialog() {
      document.getElementById('charge-dialog').style.display = 'block';
      document.getElementById('records-section').style.display = 'none';
      // 重置选择
      const amounts = document.querySelectorAll('.charge-amount');
      amounts.forEach(amount => amount.classList.remove('selected'));
      document.getElementById('custom-amount').style.display = 'none';
    }

    // 选择充值金额
    let selectedAmount = 0;
    function selectChargeAmount(amount) {
      selectedAmount = amount;
      const amounts = document.querySelectorAll('.charge-amount');
      amounts.forEach(amountEl => amountEl.classList.remove('selected'));
      event.target.classList.add('selected');
      
      if (amount === 0) {
        document.getElementById('custom-amount').style.display = 'block';
      } else {
        document.getElementById('custom-amount').style.display = 'none';
      }
    }

    // 确认充值
    function confirmCharge() {
      let amount = selectedAmount;
      
      if (amount === 0) {
        amount = parseFloat(document.getElementById('charge-input').value);
        if (isNaN(amount) || amount <= 0) {
          alert('请输入有效金额');
          return;
        }
      }
      
      if (confirm(`确认充值 ${amount} 元？`)) {
        // 模拟充值过程
        transportBalance += amount;
        updateTransportBalance();
        
        // 添加充值记录
        const recordsSection = document.getElementById('records-section');
        const newRecord = document.createElement('div');
        newRecord.className = 'transport-history-item';
        newRecord.innerHTML = `
          <span>${new Date().toLocaleString()}</span>
          <span>+${amount.toFixed(2)}元</span>
          <span>卡片充值</span>
        `;
        recordsSection.insertBefore(newRecord, recordsSection.firstChild.nextSibling);
        
        alert('充值成功！');
        document.getElementById('charge-dialog').style.display = 'none';
      }
    }

    // 显示交易记录
    function showRecords() {
      document.getElementById('records-section').style.display = 'block';
      document.getElementById('charge-dialog').style.display = 'none';
    }

    // 隐藏交易记录
    function hideRecords() {
      document.getElementById('records-section').style.display = 'none';
    }

    // 页面加载时初始化
    window.onload = function() {
      updateTransportBalance();
      
      // 模拟生成乘车码（实际应用中应该是动态生成的）
      setInterval(() => {
        console.log('乘车码已刷新');
      }, 60000); // 每分钟刷新一次
    };
  </script>
</body>
</html>